<template>
  <transition name="modal">
    <div class="modal" v-if="visible">
      <slot></slot>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'modal',
  props: {
    visible: Boolean,
  },
}
</script>
<style lang="stylus">
.modal-enter-active
  -webkit-animation modal-in 0.2s ease
  animation modal-in 0.2s ease

.modal-leave-active
  -webkit-animation modal-out 0.2s ease forwards
  animation modal-out 0.2s ease forwards

@keyframes modal-in
  0%
    opacity 0

@keyframes modal-in
  0%
    opacity 0

@keyframes modal-out
  to
    opacity 0

@keyframes modal-out
  to
    opacity 0

.modal
  position fixed
  z-index 9999
  left 0
  top 0
  width 100%
  height 100%
  opacity 0.5
  background #000
</style>
